<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      :title="bindType"
      @register="register"
      @ok="handleSubmit"
      @cancel="handleCancel"
      :destroyOnClose="true"
      :minHeight="450"
      :width="600"
    >
      <Row type="flex" :gutter="12">
        <Col flex="1">
          <div style="overflow-y: scroll; overflow-x: hidden; height: 500px">
            <BasicTree
              checkable
              :search="true"
              :toolbar="true"
              :treeData="objData"
              v-model:checkedKeys="checkedKey"
              @select="selectObj"
            />
          </div>
        </Col>
        <Col flex="1">
          <Checkbox
            v-model:checked="checkAll"
            :indeterminate="indeterminate"
            @change="onCheckAllChange"
            >{{ t('routes.demo.documentManager.objBindModal.selectAll') }}</Checkbox
          >
          <Divider />
          <div style="overflow-y: scroll; overflow-x: hidden; height: 400px">
            <CheckboxGroup
              v-model:value="selectedCheckKeys"
              :options="plainOptions"
              style="display: grid"
            />
          </div>
        </Col>
      </Row>
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Row, Col, Checkbox, CheckboxGroup, Divider } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getDataDirectoryApi } from '/@/api/demo/flow';
  import { getBindingObjectList, updateBindingObjectList } from '/@/api/demo/document';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicTree } from '/@/components/Tree/index';

  const { t } = useI18n();
  const objData = ref<any>([]);
  const checkedKey = ref<any>([]);
  const selectedCheckKeys = ref<string[]>([]);
  const plainOptions = ref<any[]>([]);
  const checkAll = ref<boolean>(false);
  const indeterminate = ref<boolean>(true);
  const bindType = ref<string>(''); // 对象绑定图档类型

  const { createMessage } = useMessage();

  async function handleSubmit() {
    const { value } = checkedKey;
    if (!value || value.length === 0) {
      return createMessage.warning(
        t('routes.demo.documentManager.objBindModal.selectDataDirectory'),
      );
    }

    const params = {
      folderIdList:
        value.hasOwnProperty('checked') && value.checked.length > 0 ? value.checked : value,
      docTypeIdList: selectedCheckKeys.value,
      flag: bindType.value === '图档' ? 1 : 0,
    };

    await updateBindingObjectList(params);
    createMessage.success(t('routes.demo.documentManager.objBindModal.bindSuccess'));
    handleCancel();
  }

  async function handleCancel() {
    checkedKey.value = [];
    closeModal();
  }

  // 通用数据获取方法，减少重复代码
  async function fetchBindingData(treeKey, flag) {
    const res = await getBindingObjectList(treeKey, flag);
    plainOptions.value = res.allTypeList.map(({ value, label }) => ({
      label: value,
      value: label,
    }));
    selectedCheckKeys.value = res.selectTypeList;
  }

  const selectObj = ([selectedKey]) => {
    const flag = bindType.value === '图档' ? 1 : 0;
    fetchBindingData(selectedKey, flag);
  };

  const onCheckAllChange = (e) => {
    selectedCheckKeys.value = e.target.checked ? plainOptions.value.map(({ value }) => value) : [];
    indeterminate.value = false;
  };

  // 定义弹窗是否可见
  const [register, { closeModal }] = useModalInner(async ({ treeKey, type }) => {
    objData.value = await getDataDirectoryApi(treeKey);
    bindType.value = type;
    fetchBindingData(treeKey, type === '图档' ? 1 : 0);
  });
</script>
